<template>
	<view class="head">
		<view class="u-flex headMian" v-if="Show">
      <view class="headTime" @click="tabChangeIndex(index)" :class="{'active':index == tabIndex}" v-for="(data,index) in time" :key="index">{{data}}</view>
    </view>
    <view class="time u-flex">
      <view class="starTime" @click="showTime(1)">{{form.start_time}}</view>
      <view class="timeTXT">至</view>
      <view class="starTime" @click="showTime(2)">{{form.end_time}}</view>
    </view>
    <u-picker mode="time" v-model="show" @confirm="confirm" :params="params"></u-picker>
  </view>
</template>

<script>
export default {
  name: "indextime",
  props:{
    Show: {
      type: Boolean,
      default: true
    },
    index:{
      type: Number|String,
      default: ''
    },
    type:{
      type: Number|String,
      default: ''
    },
    times:{
      type: Object,
      default: {}
    }
  },

  data(){
    return{
      time:['今日','本周','本月'],
      tabIndex:0,
      show:false,
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true
      },
      showIndex:0,
      form:{
        start_time:'',
        end_time:'',
      }
    }
  },
  watch:{
    index:{
      handler:function(val){
        this.tabIndex = val
        this.tabChangeIndex(val)
      },
    },
    times:{
      handler:function(val){
        this.form = val
      },
      deep:true
    },
  },
  created(){
    if(!this.type){
      this.tabChangeIndex(0)
    }
  },
  methods:{
    tabChangeIndex(index){
      this.tabIndex = index
      //今日
      if(index == 0){
        this.NewDay()
      }
      //这周
      if(index == 1){
        this.toDay()
      }
      //这月
      if(index == 2){
        this.yearChange()

      }
      this.$emit('time',this.form)
    },
    //选择哪一个时间
    showTime(index){
      this.params.hour = true
      this.params.minute = true
      this.show = true
      this.showIndex = index
    },
    //选择时间
    confirm(e){
      //开始时间
      if(this.showIndex == 1){
        this.form.start_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}` || ''
      }
      //结束时间
      if(this.showIndex == 2){
        this.form.end_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}` || ''
      }
      this.$emit('time',this.form)
    }
  },
}
</script>

<style scoped lang="scss">
	.head{
    background: white;
    box-sizing: border-box;
    .headMian{
      padding: 0 32rpx;
      padding-top: 28rpx;
      padding-bottom: 38rpx;
      border: 2rpx solid $uni-border-color;
      .headTime{
        width: 218rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 8rpx;
        margin-right: 16rpx;
        color: $uni-text-color-inverse;
        font-size: 28rpx;
        border: 2rpx solid $uni-border-color;
        &:last-child{
          margin: 0;
        }
      }
      .active{
        background: $uni-color-primary;
        border: 2rpx solid $uni-color-primary;
        color: white;
      }
    }
    .time{
      padding: 28rpx 32rpx;
      .starTime{
        width: 304rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        box-sizing: border-box;
        background: $uni-bg-color-grey;
        border-radius: 8rpx;
        font-size: 28rpx;
        color: $uni-text-color;
      }
      .timeTXT{
        color:  $uni-color-primary;
        font-size: 32rpx;
        padding: 0 24rpx;
      }
    }

	}
</style>